<template>
  <div>
    <h3 ref="t3">北江</h3>
    <h4>南河</h4>
    <button @click="showT3">点击我查看t3</button>
  </div>
</template>
<script setup lang="ts">
import { ref, defineExpose } from "vue";

// ref用在普通的DOM标签是获取DOM节点，用在组件标签上获取的是组件实例对象
let t3 = ref();

let a = ref(1);
let b = ref(2);
let c = ref(3);

function aLogin() {
  console.log("login");
}

function showT3() {
  console.log(t3.value);
}

// Person这个组件。作为儿子组件。当你在父组件中想用它的实例数据的时候需要暴漏，没有暴漏是因为它一开始具有保护措施，所以你需要Expose暴漏出去，暴漏你想用的，那么在父组件中就可以拿到Preson实例对象的数据了
defineExpose({
  aLogin,
  a,
  b,
  c,
});
</script>

<style scoped>
h3 {
  font-size: 30px;
}
</style>
